<div class="clear"></div>

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/milestone.css" />
<link rel='stylesheet' type='text/css' href="<?php echo Yii::app()->theme->baseUrl; ?>/css/jquery-ui-1.8.14.custom.css" />

<script type='text/javascript' src="<?php echo Yii::app()->theme->baseUrl; ?>/fullCalendar/jquery/jquery-ui-1.8.11.custom.min.js"></script>
<script type='text/javascript' src="<?php echo Yii::app()->theme->baseUrl; ?>/js/jquery.ui.datepicker.js"></script>
<!-- Calendar -->
<link rel='stylesheet' type='text/css' href="<?php echo Yii::app()->theme->baseUrl; ?>/fullCalendar/fullcalendar/fullcalendar.css" />
<link rel='stylesheet' type='text/css' href="<?php echo Yii::app()->theme->baseUrl; ?>/fullCalendar/fullcalendar/fullcalendar.print.css" media='print' />
<script type='text/javascript' src="<?php echo Yii::app()->theme->baseUrl; ?>/fullCalendar/fullcalendar/fullcalendar.js"></script>
<script type='text/javascript' src="<?php echo Yii::app()->theme->baseUrl; ?>/fullCalendar/fullcalendar/fullcalendar.min.js"></script>


<script type='text/javascript'>

	$(document).ready(function(){
		var time;
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();

		
		var calendar = $('#calendar').fullCalendar({
			
			
			selectable: true,
			selectHelper: true,
		
			select:  function(start){
				$('#milestoneTime').val(start);
		
			},
			select: function(start, end, allDay) {
				var title = prompt('Event Title:');
				if (title) {
					calendar.fullCalendar('renderEvent',
						{
							title: title,
							start: start,
							end: end,
							allDay: allDay
						},
						true // make the event "stick"
					);
				}
				calendar.fullCalendar('unselect');
			},
			editable: true,
			events: [
				{
					title: 'All Day Event',
					start: new Date(y, m, 1),
					url:'http://dantri.com'
				},
				{
					title: 'Long Event',
					start: new Date(y, m, d-5),
					end: new Date(y, m, d-2)
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d-3, 16, 0),
					allDay: false
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d+4, 16, 0),
					allDay: false
				},
				{
					title: 'Meeting',
					start: new Date(y, m, d, 10, 30),
					allDay: false
				},
				{
					title: 'Lunch',
					start: new Date(y, m, d, 12, 0),
					end: new Date(y, m, d, 14, 0),
					allDay: false
				},
				{
					title: 'Birthday Party',
					start: new Date(y, m, d+1, 19, 0),
					end: new Date(y, m, d+1, 22, 30),
					allDay: false
				},
				{
					title: 'Click for Google',
					start: new Date(y, m, 28),
					end: new Date(y, m, 29),
					url: 'http://google.com/'
				}
			]
		});
		
		
		
		
	/*	var calendar = $('#calendar').fullCalendar({
			
			changeMonth: true,
			selectable: true,
			selectHelper: true,
			select:  function(start){
				$('#milestoneTime').val(start);
				
			},
			editable: true
			
		});

		//count checkbox list
		$('#back').click(function() {
			count = $('.mtUser:checkbox:checked').length - 1;
			if(count > 0)
			{
				$('#addMileMorePeople').text("+ "+count+ " people");
				$('#addMileMorePeople').show();
			}
			else
				$('#addMileMorePeople').hide();
		});

		//remove checkbox list user
		$(".popupContent input").removeAttr("checked");
		$(".popupContent input").removeAttr("disabled");
		$("#addMileSelectUser").change(function() {
			$(".popupContent input").removeAttr("checked");
			$(".popupContent input").removeAttr("disabled");
		});
		
		// get selected dropdownlist value
		val = $("#addMileSelectUser").get(0).selectedIndex;
		$("input:checkbox[id='milestone_user_more_"+val+"']").attr("checked", "checked");
		$("input:checkbox[id='milestone_user_more_"+val+"']").attr("disabled", "disabled");
		
		$("#addMileSelectUser").change(function() {
			val = $(this).get(0).selectedIndex;
			$("input:checkbox[id='milestone_user_more_"+val+"']").attr("checked", "checked");
			$("input:checkbox[id='milestone_user_more_"+val+"']").attr("disabled", "disabled");
		});
		
		//change text notify, reminder
		if($('#addMileNotify').attr("checked"))
			$("#notifyLabel").html("(An email notification will be sent to the person responsible)");
		else
			$("#notifyLabel").html("(The person responsible will not be notified)");
		$("#addMileNotify").change(function() {
			if($(this).attr("checked"))
				$("#notifyLabel").html("(An email notification will be sent to the person responsible)");
			else
				$("#notifyLabel").html("(The person responsible will not be notified)");
		});

		if($('#addMileReminder').attr("checked"))
			$("#reminderLabel").html("(The person responsible will get a reminder 24 hours before it's due)");
		else
			$("#reminderLabel").html("(An email reminder will not be sent to the person responsible)");
		$("#addMileReminder").change(function() {
			if($(this).attr("checked"))
				$("#reminderLabel").html("(The person responsible will get a reminder 24 hours before it's due)");
			else
				$("#reminderLabel").html("(An email reminder will not be sent to the person responsible)");
		});
		//get Month Date
	
		$("#milestoneTime").change(function(){
			
			var date2 = $("#milestoneTime").val();
			var myDate = new Date(date2);
			var month=new Array(12);
				month[0]="Jan";
				month[1]="Feb";
				month[2]="Mar";
				month[3]="Apr";
				month[4]="May";
				month[5]="June";
				month[6]="July";
				month[7]="Aug";
				month[8]="Sep";
				month[9]="Oct";
				month[10]="Nov";
				month[11]="Dec";
			var d1 = myDate.getDate();
			var m1 = month[myDate.getMonth()];
			$(".addMonth").html(m1);
			$(".addDay").html(d1);
		});
		// Time picker
		$( "#milestoneTime" ).datepicker(
			{
			defaultDate: "+1w",
			dateFormat: 'yy-mm-dd',
			changeMonth: true,
			numberOfMonths: 1,
			showOn: 'both',
			buttonImageOnly: true,
			changeMonth: true,
			buttonText:'Select date',
			buttonImage: "<?php echo Html::imageUrl("icon_calendar.gif");?>",	
			}
		);
		$( "#editMilestoneTime" ).datepicker(
			{
			defaultDate: "+1w",
			dateFormat: 'yy-mm-dd',
			changeMonth: true,
			numberOfMonths: 1,
			showOn: 'both',
			buttonImageOnly: true,
			changeMonth: true,
			buttonText:'Select date',
			buttonImage: "<?php echo Html::imageUrl("icon_calendar.gif");?>"
			}
		);
		$('#des').click(function(){
			$('#description').show();
			return false;
		});
		// Comment
		$('#addComment').click(function(){
			$('#comment').show();
			$('#addComment').text('Close comment');
			return false;
			});
		var showOrHide = true;
		$('#addComment').toggle(showOrHide);
		$('#addComment').click(function(){
			if ( showOrHide == true ) {
				
				$('#comment').show();
				$('#addComment').text('Save comment');
				showOrHide = false;
				return false;
				}
			if ( showOrHide == false ) {
				$('#comment').hide();
				$('#addComment').text('Add comment');
				showOrHide = true;
				return false;
				}
			});	
			//Close Fancybox
		$('#cancel').click(function(){
				$.fancybox.close();
				return false;
			});
		$('#cancel2').click(function(){
				$.fancybox.close();
				return false;
			});	
			
	/*	$('#back').click(function(){
				$.fancybox.close();
				return false;
			});	

*/			
		//Delete Milestone
			$('#delete').click(function(){
				if (confirm("Are you sure you want to remove this milestone?")) 
				{
				 $(".MmessageBlock").hide();
				 $(".MblockMain").hide();				 
				 }
			});	
				
				
		//All None
		$('#all').click(function(){
			$('input:checkbox').attr('checked',true);
			count = 0;
			$("#listPeople").val(''+count+ 'persons ');
		});
		
		$('#none').click(function(){
			$('input:checkbox').attr('checked',false);
			count = 0;
			$("#listPeople").val(''+count+ 'persons ');
			});	
	});

</script>

<style type='text/css'>
	#calendar {
		width: 100%;
		margin: 0;
	}
</style>
<!-- End Calendar -->

<?php 
    $pid = Yii::app()->request->getParam('pid');
  
?>
		<div id="than">	
            <img src="<?php echo Html::imageUrl("muiten.png");?>" width="27" height="26"; style="float:left">
            <div id="textxanhdam">Milestones </div>
      	</div>
               <div class="padding15"></div>       	
            	<!-- Begin leftSidebar -->                  
              	<div id="MleftSidebar">
              		<!-- Calendar AREA -->
              		<div id="calendar" href="#addMilestone"></div>
				</div>
             	<!-- End leftSidebar-->
             	
                <!-- Begin right sidebar -->
               	<div  id="MrightSidebar">                      
					<div id="rightHeader">
						<h2>Milestones<h2>
						<button type="button" id="rightHeaderBtn" href="#addMilestone">Add a milestone</button>
					</div>
					<div id="rightWrapper">
						<!-- Uncompleted Milestones -->			
						<div id="milestoneComplete">
							<h3>Uncompleted Milestones</h3>
						</div>
						<div class="MmessageBlock">
							<div class ="addTime">
								<div class="addMonth">Aug</div>
								<div class="addDay">2</div>
							</div>
							
							<div class="MblockMain">
								<div class="milestoneDes">
									<div class ="Msdatepost"> 22 days ago (Wednesday, 08 Jun, 2011) </div>
									<div class = "Msuserpost"><a href = "#">Tran Ngoc Cuong</a> + 2 more person</div>
								</div>
								<!-- Milestone Name -->
								<div class="milestoneName">
									<h3> Lên Run gặp anh Tẩu</h3>
								</div>
							
								<!-- Milestone Description -->	
								<div class="MmessageContent">
									<p>Nếu đội bóng Hoàng gia TBN không thể có được chữ ký của ngôi sao đang khoác áo CLB Atletico Madrid, Mourinho muốn sự lựa chọn thứ 2 là chân sút Neymar (Santos).
									Nếu đội bóng Hoàng gia TBN không thể có được chữ ký của ngôi sao đang khoác áo CLB Atletico Madrid, Mourinho muốn sự lựa chọn thứ 2 là chân sút Neyma</p>
									<div class="action1">
										<a href="#editMilestone" class="MviewLink" id="edit">Edit  |</a>
										<a href="#" class="MviewLink" id="delete">Delete   |</a>
										<a href="#" class="MviewLink" id="addComment">Add a comment  </a>
									</div>
									<div id="comment" style="display:none">
										<textarea style="border:1px solid #546A12;margin-top:3px;margin-bottom :3px;width:80%;min-height:50px;"></textarea>
									</div>
								</div>
							<!-- End Milestone Name -->							
							</div>
							<!-- Milestone Description -->	
						</div>
						<!-- End Uncompleted Milestones -->	
							
						<!-- Completed Milestones -->
						<div id="milestoneComplete">
							<h3>Completed Milestones</h3>
						</div>
						<!-- End completed milestones -->
					</div>
	             </div>
	                    
	             </div>    
            <!-- End right sidebar -->
    
    
    
  <!-- Add a Milestone area -->  
    <div id="popup-addMilestone" style="display:none">

	<div id="addMilestone" class="popupWrapper" method="post" action="#">
    	<div class="popupHeader">
    		<h2>Add a MileStone</h2>	
    	</div>
    	<?php   
    		$form = $this->beginWidget('CActiveForm', array('action' => $this->createUrl('milestones/add', array('pid' => $pid))));
    	?>
    	<div class="popupContent">
<!--    		<form method="post" action="">-->
				<div class ="addTime">
					<div class="addMonth">Aug</div>
					<div class="addDay">2</div>
				</div>
    		
				<div id ="addMilestone-content">
					<h3>Milestone Name</h3>
					<?php 
              			echo $form->textField($schedule, 'schedule_subject',array('style' => "width:90%"));
              			echo $form->error($schedule, 'schedule_subject',array(
              				'class' => 'formError'
              			));
              		?>
					
					<!-- Description Area -->
					<p>Description</p>
					<?php echo $form->textArea($schedule, 'schedule_description',array('id' => 'milestoneDesc'));?>
					
					<div id="addMilestone-other" style="margin-top:8px">
						<div id="addMilestone-time">
							<label>When is it due?</label>
							<?php echo $form->textField($milestone, 'milestone_due_date',array('style' => 'width: 60%;margin-top:3px', 'id' => 'milestoneTime'));?>
						</div>
						<div id="addMilestone-user" class="clearfix">
							<p>Who's responsible?
							<!-- List User --> 
							<div style="margin-top:3px;margin-left:37%">
								<?php echo CHtml::dropDownList('milestone_user','null',$milestone->getListUser($pid),array('id'=>'addMileSelectUser', 'style'=>'width: 70%'))?>				
								<!--<select style="width: 70%" id="addMileSlectUser">
								  <option value="volvo">Volvo</option>
								  <option value="saab">Saab</option>
								  <option value="mercedes">Mercedes</option>
								  <option value="audi">Audi</option>
								</select>
							--></div>
							
							<p id="addMileMorePeople" style="display: none;"></p>
							<div class="padding5"></div>	
							<a href="#multiPeople" id="multipeople"> Multiple people</a>
							
							<!-- Multiple people -->
						    <div id="multiPeopleDiv" style="display: none;">
						    	<div id="multiPeople" class="megaWrapper" action="" method="post">
						    		<div class="popupHeader">
						    			<h2>User</h2>
										<div class = "choosePeople">
											<a id="all" href="#">All</a> |
											<a id="none" href="#">None</a>
										</div>
						    		</div>
						    		<div class="popupContent">
						    			<?php echo CHtml::checkBoxList('milestone_user_more','null',$milestone->getListUser($pid),array('class'=>'mtUser'))?>
						    		</div>
						    		<div class="postButton">
						    			<button id = "back" href ="#addMilestone">back</button> 
						    		</div>
						    	</div>
						    </div>
							<!-- End multiple people -->
							
						</div>
					</div>	
				</div>
				
	    		<div id="addMilestone-opt">
		    		<label class="title">Notify by email?</label>
		    		<?php echo CHtml::checkBox('milestone_notify',null, array('id' => 'addMileNotify'))?>	
		    		<label for="addMileNotify" class="info" id="notifyLabel"></label>
					
					<div class="padding5"></div>
						
	  				<label class="title">Email reminder?</label>	
	  				<?php echo CHtml::checkBox('milestone_reminder',null, array('id' => 'addMileReminder'))?>
 					<label for="addMileReminder" class="info" id="reminderLabel"></label>
	    		</div>
    		
	    		<div class="postButton" >
	    			<input type="submit" value="Add milestone" /> or
	    			<a href="#" class="popupCancel" id="cancel">Cancel</a>
	    		</div>
<!--    		 </form>-->
    	</div>
    	<?php $this->endWidget();?>
	</div>
</div>

<!-- Edit a Milestone area -->  
    <div id="popup-addMilestone" style="display:none">

	<div id="editMilestone" method="post" action="#">
	    	<div id="milestoneHeader">
	    		<h2>Edit this MileStone</h2>	
	    	</div>
	    	<div id="addMilestone-name">
	    		<div id="addMilestone-img">
	    			<img src="<?php echo Html::imageUrl('calendar.jpg')?>" />
	    		</div>
	    		<div id="addMilestone-content">
	    			<p>Milestone Name</p>
	    			<input type="text" name="milestoneName" >
	    			<div id="des">Description</div>
	    			<!-- Description Area -->
	    			<div id="description" >
	    				<textarea></textarea>
	    			</div>
		    		<div id="addMilestone-other" >
		    			<div id="addMilestone-time">
		    				<label>When is it due?</label>
		    				<input type="text"  id="editMilestoneTime" >
		    			</div>
		    			<div id="addMilestone-user">
		    				<label>Who's responsible?</label>
		    			
		    				<!-- List User --> 
					   <div>				
							<select>
							  <option value="volvo">Volvo</option>
							  <option value="saab">Saab</option>
							  <option value="mercedes">Mercedes</option>
							  <option value="audi">Audi</option>
							</select>
						</div>	
		    			</div>
		    		</div>	
	    		</div>
	    		<div id="addMilestone-opt">
	    		<font>Notify by email?</font><INPUT NAME="milestone-opt" TYPE="CHECKBOX" VALUE="o1">
 							(The person responsible will not be notified)<BR>
					
  				<font>Email reminder?</font>	
  					<INPUT NAME="milestone-opt" TYPE="CHECKBOX" VALUE="o1">
 							(An email reminder will not be sent to the person responsible)<BR>
	    		</div>
	    	</div>
	    	<div id="addMilestone-button" >
	    		<button id="addButton">Save milestone</button>
	    		or 
	    		<a href="#" id="cancel" style="text-decoration: line-through;">Cancel</a>
	    	</div>
	    	
        	
		
	</div>
</div>

    
<?php  $this->widget('application.extensions.fancybox.EFancyBox', array( 'target'=>'button#back', 'config'=>array( 'scrolling' => 'no', 'titleShow' => false,  'hideOnOverlayClick' =>false ), ) ); ?>
<?php  $this->widget('application.extensions.fancybox.EFancyBox', array( 'target'=>'button#multiSave', 'config'=>array( 'scrolling' => 'no', 'titleShow' => false,  'hideOnOverlayClick' =>false ), ) ); ?>
<?php  $this->widget('application.extensions.fancybox.EFancyBox', array( 'target'=>'a#multipeople', 'config'=>array( 'scrolling' => 'no', 'titleShow' => false,  'hideOnOverlayClick' =>false ), ) ); ?>
<?php  $this->widget('application.extensions.fancybox.EFancyBox', array( 'target'=>'a#edit', 'config'=>array( 'scrolling' => 'no', 'titleShow' => false,  'hideOnOverlayClick' =>false), ) ); ?>
<?php  $this->widget('application.extensions.fancybox.EFancyBox', array( 'target'=>'button#rightHeaderBtn', 'config'=>array( 'scrolling' => 'no', 'titleShow' => false, 'hideOnOverlayClick' =>false ), ) ); ?>
<?php  $this->widget('application.extensions.fancybox.EFancyBox', array( 'target'=>'a#cancel', 'config'=>array( 'scrolling' => 'no', 'titleShow' => false, 'hideOnOverlayClick' =>false ), ) ); ?>
<?php // $this->widget('application.extensions.fancybox.EFancyBox', array( 'target'=>'div#calendar', 'config'=>array( 'scrolling' => 'no', 'titleShow' => false,  'hideOnOverlayClick' =>false), ) ); ?>